<template>
  <header>
    <div>
      <router-link to="/">
        <el-icon><HomeFilled /></el-icon>
        首页
      </router-link>
      <span
        v-for="(i, j) in nav"
        :key="j"
        :class="active == j ? 'active' : ''"
        @click="switchtype($event, j)"
      >
        {{ i }}
      </span>
      <!-- <span :class="active==0?'active':''" @click="switchtype">热映</span>
      <span :class="active==1?'active':''"  @click="switchtype">新片预告</span>
      <span :class="active==2?'active':''"  @click="switchtype">小视频</span> -->
    </div>
  </header>
  <router-view v-slot="{ Component }">
   <keep-alive :include="['hoT', 'neW','morE']">
     <component :is="Component" />
   </keep-alive>
</router-view>
  <!-- <videoList :list="list"></videoList> -->
</template>

<script>
import { HomeFilled } from '@element-plus/icons-vue'
import {
  movie_Hot_API,
  movie_new_movie_API,
  movie_small_video_API,
} from '@/api/movie'
export default {
  name: 'movie_Hot_API',
  components: {
    // videoList,
    HomeFilled
  },
  data() {
    return {
      // nav: ['热映', '新片预告', '小视频'],
       nav: ['热映'],
      list: [],
      active: 0,
      offset:15,
    }
  },
  beforeCreate() {
    document.title = '猫眼电影介绍（非商用）'
  },
  created() {
    // this.getmoviehot()
    // this.getnewmovie()
    // this.getsmallvideo()
  },
  methods: {
    switchtype(e, j) {
      this.active = j
      
      if(j==0){
         this.$router.push('/movie')
      }
      if(j==1){
        this.$router.push('/movie/new')
      }
      if(j==2){
        this.$router.push('/movie/more')
      }
      // console.log(e)
    },
    getmoviehot() {
      movie_Hot_API().then(({ data: res }) => {
        // console.log(res.data.hot)
        this.list = res.data.hot
      })
    },
     getnewmovie(){
        movie_new_movie_API(this.offset).then(({data:res})=>{
             this.list = res.data.feeds
            console.log(res.data)
        }).catch((error)=>{
            console.log("失败了显示失败页面，刷新一下")
        })
    //   const {data:res}= await 
    //   console.log(res)
    }

  },
}
</script>

<style lang="scss" scoped>
header {
  height: 56px;
  position: fixed;
  top: 0;
  width: 100%;
  min-width: 1000px;
  z-index: 123;
  background: #fdfdfe;
  transition: all 0.5s;
  /*width: 1440px;*/
  /*left: 50%;*/
  /*margin-left: -720px;*/
  /*background: rgba(230, 244, 255, 0.9);*/
  box-shadow: 0px 2px 30px 10px rgba(62, 99, 128, 0.1);
}

header > div {
  display: flex;
  height: 56px;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 1000px;
  margin: auto auto;
}
header > div a {
    line-height: 56px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  color: #222a3a;
}
header > div > span {
  margin-left: 50px;
  display: block;
  margin-right: 50px;
  font-size: 16px;
  color: #222a3a;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
header > div > span::before {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background: linear-gradient(144deg, #1d87ff 0%, rgba(169, 246, 254, 0) 100%);
  content: '';
  position: absolute;
  top: -4px;
  left: -8px;
  z-index: -1;
  transition: all 0.5s;
  opacity: 0;
}
header > div > span.active {
  color: #176cda;
  pointer-events: none;
}

header > div > span.active::before {
  opacity: 1;
}
</style>
